<template>
	<view>
		<view class="itemdd" @click="orderDetails(item)">
			<view class="le">
				<view class="namm">
					<text class="nm">{{item.serviceName[0]}}</text>

				</view>

				<!-- 	<view class="time">
					<text class="yx">有效期：</text>
					<text class="ti">2025-02-18至2025-04-18</text>
				</view> -->
				<view class="time">

					<text class="yx">服务地址：</text>
					<text class="ti">{{item.userAddress.region.label}}-{{item.userAddress.detailed}}</text>
				</view>
			</view>
			<view class="rig">
				<text class="zt" style="color: #ff6753;">{{item.orderStatus}}</text>
				<text class="hj">
					<text class="hhj">合计：</text>
					<text class="price">￥{{item.payablePrice}}.00</text>

				</text>
				<view class="btna">
					<!-- 	<view class="btns" @click="goPgae('去确认')">
						<u-button color="#7a7a7a" type="primary" size="mini" shape="circle" :plain="true"
							text="去确认"></u-button>
					</view> -->
					<view class="btns" v-if="item.orderStatus=='待支付'" @click="goPgae('去支付',item)">
						<u-button color="#7a7a7a" type="primary" size="mini" shape="circle" :plain="true"
							text="去支付"></u-button>
					</view>
					<!-- <view class="btns" @click="goPgae('查看进度')">
						<u-button color="#7a7a7a" type="primary" size="mini" shape="circle" :plain="true"
							text="查看进度"></u-button>
					</view> -->
					<view class="btns" @click.stop="open(item)" v-if="item.orderStatus != '已取消'">
						<u-button color="#7a7a7a" type="primary" size="mini" shape="circle" :plain="true"
							text="取消订单"></u-button>
					</view>

					<!-- <view class="btns" @click="goPgae('申请退款')">
						<u-button color="#7a7a7a" type="primary" size="mini" shape="circle" :plain="true"
							text="申请退款"></u-button>
					</view>
					<view class="btns" @click="goPgae('联系工作人员')">
						<u-button color="#7a7a7a" type="primary" size="mini" shape="circle" :plain="true"
							text="联系工作人员"></u-button>
					</view> -->
					<view class="btns" v-if="item.orderStatus == '已完成'" @click="goPgae('待评价',item)">
						<u-button color="#7a7a7a" type="primary" size="mini" shape="circle" :plain="true"
							text="去评价"></u-button>
					</view>
				</view>

			</view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: ["list2", "item", "index"],
		methods: {
			orderDetails(e) {
			
				// console.log(e);
				// if (e.fwstatus == 2) {
				uni.navigateTo({
					url: "/otherPage/myOrder/orderDetails/orderDetails?item=" + JSON.stringify(e)
				});
			
				// }
			
			
			
			
			
			},
			open(e) {
				const that = this
				uni.showModal({
					title: '提示',
					content: '是否取消订单？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							console.log("item", e);
							uni.showToast({
							title: '退款成功',
							icon: 'success',
							duration: 500
							});
							that.$http.post('/buyrOrder/cancellationoforder', e).then(res => {
								console.log('res', res);
							})

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			goPgae(e, item) {
				if (e == "查看") {
					this.$toPage("/components/refund/refund")
				}
				// if (e == "去确认") {
				// 	this.$toPage("/otherPage/myOrder/confirmPage/confirmPage")
				// }
				if (e == "去支付") {
					console.log("支付信息", item);
					this.$toPage("/otherPage/myOrder/goPay/goPay", "item", JSON.stringify(item))
				}
				if (e == "查看进度") {
					this.$toPage("/components/taskProgress/taskProgress")
				}
				if (e == "申请退款") {
					this.$toPage("/otherPage/myOrder/refundRequest/refundRequest")
				}
				if (e == "待评价") {
					console.log("daipingjia", item);
					this.$toPage("/otherPage/myOrder/goEvaluate/goEvaluate", "item", JSON.stringify(item))
				}
			}
		}
	}
</script>

<style lang="less">
	.itemdd {
		margin: 5px;
		padding: 5px 10px;
		border-radius: 10px;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;

		.le {
			.namm {
				.nm {


					font-size: 13px;
					font-weight: bold;
				}
			}

			.time {
				margin-top: 8px;
				font-size: 11px;
				display: flex;
				align-items: center;

				.yx {
					color: #424242;
				}

			}



		}

		.rig {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-end;

			// .zt {
			// 	color: #ff6753;
			// }

			.hj {
				margin-top: 30px;
				font-size: 15px;

				.hhj {
					color: #424242;
				}

				.price {}
			}

			.btna {
				display: flex;

				.btns {
					margin: 5px;
				}


			}
		}
	}
</style>